<template>
  <div class="star-main">
    <div class="star-main-head">
      <p>初始化中心</p>
    </div>
    <div class="outside-from">
      <el-form
        label-position="right"
        label-width="100px"
        :model="formLabelAlign"
        style="max-width: 460px"
        :rules="rules"
        class="star-main-form"
      >
        <el-form-item
          label="中心序列号："
          prop="init_num"
          label-width="auto"
          class="from-laber"
        >
          <el-input v-model="formLabelAlign.init_num"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="star-main-footer">
      <el-button type="primary" @click="onSubmit" style="margin-left:100px;">提交</el-button>
    </div>

  </div>
   <el-button type="primary" style="margin-left: 240px" @click="step"
    >下一步
  </el-button>
</template>

<script>
import { reactive } from "vue";
import { ElNotification, ElMessage } from "element-plus";
import request from "@/http/request";
import store from "../../store";
import {useRouter} from "vue-router";
export default {
  setup(props) {
     const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    const formLabelAlign = reactive({
      init_num: "",
      user_id:userInfo.user_id
    });
    const onSubmit = async () => {
      // 发送请求
      console.log(formLabelAlign);
      formLabelAlign.init_num = Number(formLabelAlign.init_num);
      const { data } = await request.center(formLabelAlign);
      // console.log(data);
      if (data.code === 0) {
        ElNotification({
          title: "消息提示",
          message: data.message,
          position: "bottom-right",
        });
      } else {
        ElMessage.error(data.message);
      }
    };
    // 表格校验
    const rules = reactive({
      init_num: [
        {
          required: true,
          message: "请输入中心序列号",
          trigger: "blur",
        },
        {
          min: 8,
          max: 32,
          message: "长度在8-32位之间",
        },
      ],
    });
    const router = useRouter();
     const step = () => {
       router.push("/home/tabs/send")
      store.commit("CHANGE2", false);
    };
    return {
      formLabelAlign,
      rules,
      onSubmit,
      step
    };
  },
};
</script>

<style scoped lang='scss'>
.star-main {
  border: 1px solid #dddddd;
  width: 100%;
  width: 600px;
  margin: 30px;
  border-radius: 10px;
  .star-main-head {
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
    border-radius: 10px 10px 0 0;
    p {
      line-height: 60px;
      text-align: left;
      margin-left: 20px;
      font-size: 14px;
    }
  }
  .outside-from {
    width: 100%;
    height: 80px;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
  }
  .star-main-form {
    margin-left: 30px;
    height: 35px;
  }
  .el-form-item--default {
    --font-size: 12px;
    --el-form-label-font-size: var(--font-size);
    margin-bottom: 18px;
  }
  .star-main-footer {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
    border-radius: 0px 0px 10px 10px;
    button {
      background-color: #428bca;
    }
  }
}
</style>